<template>
  <div class="menuManagement-container">
    <el-row>
      <el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
        <vab-query-form>
          <vab-query-form-top-panel :span="12">
            <el-button icon="el-icon-plus" type="primary" @click="handleEdit">添加</el-button>
          </vab-query-form-top-panel>
        </vab-query-form>
        <el-table
          v-loading="listLoading"
          :data="list"
          :element-loading-text="elementLoadingText"
          row-key="menuId"
          :tree-props="{ children: 'childMenus' }"
        >
          <el-table-column label="菜单名称" prop="menuName" />
          <el-table-column label="图标" prop="icon" width="200" />
          <el-table-column label="菜单类型" prop="menuType" width="100">
            <template #default="{ row }">
              <el-tag v-if="row.menuType == 'M'">目录</el-tag>
              <el-tag v-else-if="row.menuType == 'C'" type="success">菜单</el-tag>
              <el-tag v-else-if="row.menuType == 'F'" type="warning">按钮</el-tag>
              <div v-else>-</div>
            </template>
          </el-table-column>
          <el-table-column label="排序" prop="orderNum" width="100" />
          <el-table-column label="打开方式" prop="target" width="100">
            <template #default="{ row }">
              <div v-if="row.target == 'menuItem'">当前页面</div>
              <div v-else-if="row.target == 'menuBlank'">新窗口</div>
              <div v-else>-</div>
            </template>
          </el-table-column>

          <el-table-column label="菜单路径" prop="url" />

          <el-table-column label="是否显示" prop="visible" width="100">
            <template #default="{ row }">
              <el-switch
                @change="() => handleChange(row)"
                v-model="row.visible"
                active-value="1"
                inactive-value="0"
                :disabled="isSwitch"
              ></el-switch>
            </template>
          </el-table-column>

          <el-table-column label="操作" width="130" fixed="right">
            <template #default="{ row }">
              <el-link type="primary" @click="handleAdd(row)">添加</el-link>
              <el-link style="margin: 0 10px" type="primary" @click="handleEdit(row)">编辑</el-link>
              <el-link type="danger" @click="handleDelete(row)">删除</el-link>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <edit ref="edit" @fetch-data="fetchData" />
  </div>
</template>

<script>
  import { doDelete, getRouterList, doEdit } from '@/api/router'
  import Edit from './components/MenuManagementEdit'

  export default {
    name: 'MenuManagement',
    components: { Edit },
    data() {
      return {
        data: [],
        defaultProps: {
          children: 'children',
          label: 'label',
        },
        list: [],
        listLoading: true,
        elementLoadingText: '正在加载...',
        timeOutID: null,
        isSwitch: false,
      }
    },
    async created() {
      this.fetchData()
    },

    beforeDestroy() {
      clearTimeout(this.timeOutID)
    },
    methods: {
      handleAdd(row) {
        console.info('row  ----->  ', row)
        this.$refs['edit'].showEdit()
        this.$refs['edit'].setOrderNum(row.childMenus.length, row.menuId, row.url)
      },
      handleEdit(row) {
        if (row.url) {
          this.$refs['edit'].showEdit(row)
        } else {
          this.$refs['edit'].showEdit()
          this.$refs['edit'].setOrderNum(this.list.length)
        }
      },

      async handleChange(row) {
        try {
          this.isSwitch = true
          const newRow = JSON.parse(JSON.stringify(row))
          if (newRow.parentld == 0) delete newRow.parentld
          delete newRow.childMenus
          await doEdit(newRow)
          this.$baseMessage('操作成功', 'success')
          this.isSwitch = false
        } catch (error) {
          this.isSwitch = false
        }
      },

      handleDelete(row) {
        if (row.menuId) {
          this.$baseConfirm('你确定要删除当前项吗', null, async () => {
            const { msg } = await doDelete({ menuId: row.menuId })
            this.$baseMessage(msg, 'success')
            this.fetchData()
          })
        }
      },
      async fetchData() {
        try {
          this.listLoading = true
          const { data } = await getRouterList()
          this.list = data.data
          this.listLoading = false
        } catch (error) {
          this.listLoading = false
        }
      },
      handleNodeClick() {
        this.fetchData()
      },
    },
  }
</script>
